.vue-codemirror {
  .CodeMirror {
    font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier,
      monospace;
    background-color: #fff;
    border: 1px solid #d2dae8;
    border-radius: 4px;

    span {
      &.cm-string {
        &.cm-property {
          color: #005cc5;
        }
      }
      &.cm-number {
        color: #005cc5;
      }
      &.cm-atom {
        color: #905;
      }
      &.cm-string {
        color: #690;
      }
      &.cm-tag {
        color: #22863a;
      }
      &.cm-attribute {
        color: #6f42c1;
      }
      &.cm-comment {
        color: #6a737d;
      }
    }

    .CodeMirror-gutters {
      background-color: #fff;
    }

    &.CodeMirror-wrap pre.CodeMirror-line,
    &.CodeMirror-wrap pre.CodeMirror-line-like {
      word-wrap: break-word;
      white-space: pre-wrap;
      word-break: break-word;
    }
  }
}
